<template>
  <div style="width: 100%">
    <template v-if="currentDataList && currentDataList.length > 0">
      <van-steps
        v-if="mode === 'edit'"
        :active="active"
        :active-icon="activeObject[finishStatus]['icon']"
        :direction="direction"
        :active-color="activeObject[finishStatus]['color']"
      >
        <van-step
          v-for="(item, index) in currentDataList"
          :key="index"
          :style="active >= index ? activeObject[finishStatus] : null"
        >
          {{ item.label }}
        </van-step>
      </van-steps>
      <div v-else></div>
    </template>
    <van-steps
      v-else
      :active="active"
      :active-icon="activeObject[finishStatus]['icon']"
      :direction="direction"
      :active-color="activeObject[finishStatus]['color']"
    >
      <van-step :style="activeObject[finishStatus]">步骤1</van-step>
      <van-step :style="activeObject[finishStatus]">步骤2</van-step>
      <van-step :style="activeObject[finishStatus]">步骤3</van-step>
    </van-steps>
  </div>
</template>
<script>
import datasource from "../../mixins/steps-datasource";
export default {
  name: "steps",
  mixins: [datasource],
  props: {
    // value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    active: {
      type: Number,
      default: 0,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    direction: "",
    isAlignCenter: {
      type: Boolean,
      default: false,
    },
    isSimple: {
      type: Boolean,
      default: false,
    },
    stepsdata: {
      type: Array,
      default() {
        return [];
      },
    },
    finishStatus: {},
  },
  computed: {
   
  },
  data() {
    return {
      currentDataList: [],
      activeObject: {
        success: {
          color: "#67C23A",
          icon: "success",
        },
        process: {
          color: "#303133",
          icon: undefined,
        },
        finish: {
          color: "#409EFF",
          icon: undefined,
        },
        wait: {
          color: "#C0C4CC",
          icon: undefined,
        },
        error: {
          color: "#F56C6C",
          icon: "cross",
        },
      },
    };
  },
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length) {
          this.currentDataList = val.map((item) => {
            return {
              value: item.value,
              label: item.label,
            };
          });
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped></style>
